<!DOCTYPE html>
<html>
<head>
    <script>
      window.CSS.registerProperty({
        name: '--end-color',
        syntax: '<color>',
        inherits: false,
        initialValue: '#4ecdc4',
      })
    </script>
    <style>
        @property --start-color {
            syntax: '<color>';
            inherits: false;
            initial-value: #ff6b6b;
        }

        @property --end-color {
            syntax: '<color>';
            inherits: false;
            initial-value: #4ecdc4;
        }

        @keyframes change-end-color {
            from {
                --end-color: #4ecdc4;
            }

            to {
                --end-color: #a7dbd7;
            }
        }

        .gradient-box {
            animation: change-end-color 3s infinite alternate;
            width: 300px;
            height: 200px;
            background: linear-gradient(45deg, var(--start-color), var(--end-color));
            transition: --start-color 1s ease-in-out, --end-color 1s ease-in-out;
        }

        .gradient-box:hover {
            --start-color: #ff9a9e;
        }
    </style>
</head>
<body>
<div class="gradient-box"></div>
</body>
</html>
